import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

Σε αυτό το παράδειγμα:

• Το React.lazy χρησιμοποιείται για να φορτώσει αργά το MyComponent.
• Το Suspense περικλείει το LazyComponent.
• Το prop fallback παρέχει μια fallback διεπαφή χρήστη (μια ένδειξη φόρτωσης) που εμφανίζεται ενώ φορτώνει το MyComponent.

Εφαρμογή Error Boundaries

Ενώ το Suspense χειρίζεται τις καταστάσεις φόρτωσης, τα Error Boundaries είναι στοιχεία React που συλλαμβάνουν σφάλματα JavaScript οπουδήποτε στο δέντρο θυγατρικών στοιχείων τους, καταγράφουν αυτά τα σφάλματα και εμφανίζουν μια fallback διεπαφή χρήστη αντί να καταρρεύσουν ολόκληρο το δέντρο στοιχείων.

Πώς λειτουργούν τα Error Boundaries

Τα Error Boundaries είναι στοιχεία κλάσης που ορίζουν τις ακόλουθες μεθόδους κύκλου ζωής:

• static getDerivedStateFromError(error): Αυτή η μέθοδος καλείται μετά την απόρριψη ενός σφάλματος από ένα στοιχείο απόγονο. Λαμβάνει το σφάλμα που απορρίφθηκε ως όρισμα και θα πρέπει να επιστρέψει μια τιμή για να ενημερώσει την κατάσταση.
• componentDidCatch(error, info): Αυτή η μέθοδος καλείται μετά την απόρριψη ενός σφάλματος από ένα στοιχείο απόγονο. Λαμβάνει το σφάλμα και ένα αντικείμενο πληροφοριών που περιέχει πληροφορίες σχετικά με το ποιο στοιχείο απέρριψε το σφάλμα. Αυτό είναι το ιδανικό μέρος για να καταγράψετε το σφάλμα σε μια υπηρεσία όπως το Sentry ή το Bugsnag.

Σημαντικό: Τα Error Boundaries συλλαμβάνουν μόνο σφάλματα στα στοιχεία κάτω από αυτά στο δέντρο. Ένα Error Boundary δεν μπορεί να συλλάβει ένα σφάλμα μέσα στον εαυτό του.

Παράδειγμα: Βασική Εφαρμογή Error Boundary

            
import React, { Component } from 'react';

class ErrorBoundary extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false
 };
 }

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // You can also log the error to an error reporting service
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Για να χρησιμοποιήσετε το Error Boundary, περικλείστε οποιοδήποτε στοιχείο που μπορεί να ρίξει ένα σφάλμα:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Ενσωμάτωση Suspense και Error Boundaries

Η αληθινή δύναμη προέρχεται από τον συνδυασμό Suspense και Error Boundaries. Αυτό σας επιτρέπει να χειρίζεστε τόσο τις καταστάσεις φόρτωσης όσο και τα σφάλματα με χάρη στην εφαρμογή σας. Η συνιστώμενη πρακτική είναι να περικλείετε το Suspense με ένα Error Boundary. Με αυτόν τον τρόπο, εάν το στοιχείο που φορτώνεται αργά αποτύχει να φορτώσει (π.χ., σφάλμα δικτύου), το Error Boundary μπορεί να συλλάβει το σφάλμα και να εμφανίσει ένα χρήσιμο μήνυμα στον χρήστη.

Παράδειγμα: Συνδυασμός Suspense και Error Boundaries

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...